<template>
  <view class="comment-container" v-if="isLoaded">
    <!-- 已评价 -->
    <view v-if="hasCommented" class="container1">
      <!-- <navigator open-type="exit" target="miniProgram">退出</navigator> -->
      <view style="text-align: center; margin-bottom: 20px; font-size: 16px"
        >你已评价，感谢您对本店的大力支持！</view
      >
      <view
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
        "
      >
        <button
          style="background-color: #edac2f; width: 70vw; color: #fff"
          @click="onClk"
        >
          确定
        </button>
      </view>
    </view>

    <!--  未评价  -->
    <view v-else class="container2">
      <view>
        <view class="card">
          <view class="o">
            <view>{{ orderDetail.storeName }}</view>
            <view class="t">
              <image
                @click="onRadioClick"
                :src="
                  form.isAnonymous
                    ? `/static/images/icon/selected.png`
                    : `/static/images/icon/no_select.png`
                "
                class="img"
              >
              </image>
              <text> 匿名评价 </text>
            </view>
          </view>
          <view class="rate-container">
            <view class="rate-title">评分</view>
            <view>
              <u-rate
                :count="5"
                active-color="#edac2f"
                v-model="form.point"
                allowHalf
                :size="25"
                :minCount="0.5"
              />
            </view>
          </view>
        </view>
      </view>

      <view>
        <view class="card">
          <view>
            <u--textarea
              :height="100"
              v-model="form.remark"
              placeholder="亲，好与不好都可以告诉我们哟！"
              :maxlength="255"
            ></u--textarea>
          </view>
          <view>
            <li-upload-img
              :imgFiles="form.images"
              :maxCount="5"
              :showBottomText="false"
              v-on:afterChooseImage="afterChooseImage($event)"
              v-on:deleteImg="deleteImg($event)"
            />
          </view>
        </view>
      </view>

      <view class="card">
        <view class="flex flex-column">
          <text class="fszie-28 fweigh-600">订单信息</text>
        </view>
        <view class="mt-30 pt-30 border-t">
          <view
            class="flex mb-30"
            v-for="(item, _index) in orderDetail.foodData"
            :key="item"
          >
            <image
              class="width-88 height-88 shrink0"
              :src="item.foodImage"
            ></image>
            <view class="ml-10 w-100">
              <view class="fweigh-500 fsize-28">{{ item.foodName }}</view>
              <view class="fsize-24 line-gray mt-5"
                >{{ item.specName }} {{ item.feedTasteNames || "" }}</view
              >
            </view>
            <view
              class="ml-10 shrink0 flex flex-column justify-between align-end"
            >
              <view>
                <text class="fsize-20">￥</text>
                <text class="fsize-28" v-if="!deskId">{{
                  item.realPrice
                }}</text>
                <text class="fsize-28" v-else>{{ item.allAmount }}</text>
              </view>
              <view class="line-gray fsize-26">x{{ item.quantity }}</view>
            </view>
          </view>
          <!--     <view class="border-t pt-30 text-align-right">
            <text class="fsize-26"
              >共{{ orderDetail.foodData.length }}件商品，合计</text
            >
            <text class="ml-10 fsize-30 fweigh-600">￥</text>
            <text class="fsize-40 fweigh-600">{{
              orderDetail.sumAllAmount
            }}</text>
          </view> -->
        </view>
      </view>

      <view class="btn-bottom">
        <button
          style="background-color: #edac2f; width: 90vw; color: #fff"
          v-on:tap="onSubmitClick"
        >
          提交评价
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { uModal, uNavigateTo, uToast } from "../../utils/uniUtils";
export default {
  data() {
    return {
      orderId: null,
      hasCommented: false,
      isLoaded: false,
      form: {
        orderId: null,
        corpId: null,
        storeId: null,
        point: 5,
        remark: "",
        images: [],
        isAnonymous: false,
      },
      orderDetail: null,
    };
  },
  async onLoad(options) {
    this.orderId = options.orderid;
  },
  async mounted() {
    try {
      this.hasCommented = (
        await this.$api.getHasCommented({
          data: this.orderId,
        })
      ).data;

      if (!this.hasCommented) {
        // get order data
        this.orderDetail = (
          await this.$api.GetOrderDetail({
            orderId: this.orderId,
          })
        ).data;
        this.form.corpId = this.orderDetail.corpId;
        this.form.orderId = this.orderDetail.orderId;
        this.form.storeId = this.orderDetail.storeId;
        this.form.remark = "";
      }
      this.isLoaded = true;
    } catch (e) {
      this.isLoaded = false;
      await uToast("加载失败！", "error");
      setTimeout(() => {
        uNavigateTo("/pages/tab_bar/index");
      }, 1500);
    }
  },
  methods: {
    async onSubmitClick() {
      if (await uModal("确定要提交吗？")) {
        let json = JSON.parse(JSON.stringify(this.form));
        json.images = JSON.stringify(json.images);
        if ((await this.$api.SubmitComment(json)).code == 0) {
          this.hasCommented = true;
        }
      }
    },
    deleteImg(e) {
      this.form.images.splice(e.idx, 1);
    },
    afterChooseImage(e) {
      this.form.images.push(e.imgSrc);
    },
    onRadioClick() {
      this.form.isAnonymous = !this.form.isAnonymous;
    },
    onClk() {
      uNavigateTo("/pages/tab_bar/index");
    },
  },
};
</script>

<style lang="scss" scoped>
.comment-container {
  height: 100vh;
  background-color: #f7f7f7;

  .container1 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .container2 {
    height: 100vh;
    padding: 0 10px;
    padding-bottom: 100px;
    overflow-y: scroll;

    .card {
      background-color: #fff;
      padding: 15px 10px;
      margin-top: 15px;
      border-radius: 8px;

      .o {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .t {
        display: flex;
        align-items: center;
      }

      .rate-container {
        margin-top: 5px;
        display: flex;
        align-items: center;

        .rate-title {
          font-weight: bold;
          font-size: 16px;
          margin-right: 20px;
        }
      }
    }
  }

  .btn-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 10px;
    left: 0;
    right: 0;
    border-radius: 20px;
  }

  .img {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }
}
</style>
